import { Component, ElementRef } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { OverlayContainer } from '@angular/cdk/overlay';
import { AppState } from '@app/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'bee';
  theme = 'bee-dark-theme';
  constructor(
    breakpointObserver: BreakpointObserver,
    appState: AppState,
    private element: ElementRef,
    private overlayCotainer: OverlayContainer
  ) {
    breakpointObserver
      .observe([Breakpoints.Handset, Breakpoints.TabletPortrait])
      .subscribe((result) => {
        appState.setHandset(result.matches);
      });

    appState.theme().subscribe((theme) => {
      this.element.nativeElement.classList.remove(this.theme);
      this.overlayCotainer.getContainerElement().classList.remove(this.theme);
      this.element.nativeElement.classList.add(theme);
      this.overlayCotainer.getContainerElement().classList.add(theme);
      this.theme = theme;
    });
  }
}
